<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="../node_modules/@vue/runtime-dom/dist/runtime-dom.global.js"></script>

  <body>
    <div id="app"></div>
  </body>
  <script>
    let { reactive, createApp, h } = VueRuntimeDOM;
    let app = createApp(
      {
        setup(props, context) {
          let state = reactive({ user: "hl", flag: true });
          setTimeout(() => {
            state.flag = false;
          }, 3000);
          let update = () => {
            state.flag = false;
            state.user = "hu.lei";
          };
          // 新老都是文本
          // return (ctx) => (state.flag ? h("div", "1") : h("div", "2"));
          // 老的是列表，新的是文本
          return (ctx) =>
            state.flag
              ? h("div", [h("li", { key: "A" }, "A")])
              : h("div", "hu.lei");
        },
        // render: (ctx) => {
        //   console.log("ctx", ctx.state);
        //   return h(
        //     "div",
        //     { style: { color: "red" }, onClick: () => alert(1) },
        //     ["hello", "hello"]
        //   );
        // },
      },
      { name: "hu.lei" }
    );
    app.mount("#app");
  </script>
</html>
